import React, {FC, useEffect} from 'react'
import './index.css'
import analysis from '@/images/home/analysis.png'
import set from '@/images/home/set.png'
import house from '@/images/home/house.png'
import monitor from '@/images/home/monitor.png'
import person from '@/images/home/person.png'
import epidemic from '@/images/home/epidemic.png'
import {Button, Layout} from "antd";
import {useHistory} from "react-router";
import {useRequest} from "@umijs/hooks";
import {fetchRequest} from "@/utils/Request";
import {url} from '@/utils/url'
import HeaderInfo from "@/containers/Homepage/views/HeaderInfo";
import dayjs from "dayjs";

const {Header, Footer, Sider, Content} = Layout;


interface Card {
    title: string,
    btn: string,
    img: string,
    url: string,
    disabled: boolean

}

const list = [
    {
        img: person,
        title: '人员管理',
        btn: '查看',
        url: '',
        key: 'studentManage',
        disabled: true,
    },
    {
        img: set,
        title: '系统管理',
        btn: '查看',
        url: '',
        key: 'sysManage',
        disabled: true,
    },
    {
        img: epidemic,
        title: '疫情防控',
        btn: '查看',
        url: '',
        key: 'epidemicManage',
        disabled: true,
    },
    {
        img: house,
        title: '家校互动',
        btn: '查看',
        url: '',
        key: 'interactManage',
        disabled: true,
    },


    {
        img: monitor,
        title: '视频监控',
        btn: '查看',
        url: '',
        key: 'monitorManage',
        disabled: true
    },

    {
        img: analysis,
        title: '数据分析/统计',
        btn: '查看',
        key: 'dataAnalysisManage',
        url: '',
        disabled: true,
    },


]
const Card: FC<Card> = ({title, img, btn, url, disabled}) => {
    const history = useHistory()
    return <div key={title} className='home-item-wrap'>
        <img src={img} alt={title}/>
        <div className={'home-item-txt'}>
            <p>{title}</p>
            <Button shape="round" size={'large'} onClick={() => history.push(url)} disabled={disabled}>{btn}</Button>
        </div>
    </div>
}

const Index: FC = () => {
    const history = useHistory()

    const {data} = useRequest(() => fetchRequest(url.GET_MODELS, {}))
    if (data && !data?.toNaviPage) {
        history.replace('/homepage')
    }

    const powerList = data?.data ? list.map(c => {

            if (c.key in data?.data) {
                c.url = data?.data[c.key][0].url
                c.disabled = false
            }
            return c
        }
    ) : []

    const dataAnalysisManage = powerList[2]
    const aList = powerList.filter((item, index) => index < 2)
    const bList = powerList.filter((item, index) => index > 2)

    let date: number | string = dayjs().hour()


    useEffect(() => {
        // @ts-ignore
        window.WIDGET = {
            "CONFIG": {
                "modules": "012",
                "background": "5",
                "tmpColor": "000000",
                "tmpSize": "34",
                "cityColor": "000000",
                "citySize": "20",
                "aqiColor": "FFFFFF",
                "aqiSize": "34",
                "weatherIconSize": "66",
                "alertIconSize": "60",
                "padding": "0px 0px 0px 0px",
                "shadow": "0",
                "language": "auto",
                "fixed": "false",
                "vertical": "center",
                "horizontal": "center",
                "key": "3764e19917654edea0ee0e9ebb4916c1"
            }
        }



        const script = document.createElement('script')

        script.src = 'https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0';
        script.async = true;
        document.body.append(script)


    }, [])


    if (date > 6 && date <= 11) {
        date = '上午好'
    }

    if (date > 11 && date <= 13) {
        date = '中午好'
    }
    if (date > 13 && date <= 19) {
        date = '下午好'
    }
    if (date > 19 && date <= 24) {
        date = '晚上好'
    }
    if (date < 6) {
        date = '晚上好'
    }

    return (
        <Layout className={'home'}>
            <Header>
                <span className={'title'}>校园翼卡通</span>
                <HeaderInfo/>
            </Header>
            <Content>
                <div className='home-wrap'>
                    <div className='home-header-wrap'>
                        <div className='welcome'>
                            <h1>{date}，欢迎登录本系统！</h1>
                            <p>上次登录时间：{data?.lastTime}</p>
                            <div className={'weaItemsWraper'}>
                                <div id="he-plugin-simple"/>
                            </div>
                        </div>

                    </div>
                    <div className='home-list-wrap'>
                        {powerList.map(item => <Card {...item}/>)}
                    </div>
                </div>
            </Content>
            <Footer className={'home-footer'}>点击上方板块进入对应页面</Footer>

        </Layout>
    )
}


export default Index